<template>
  <div class="viewCollectionTopic"> 
    <head-Menu></head-Menu>
    <div class="VCTContainer">
      <h4 style="margin:10px 0">收藏夹</h4>
      <div class="answerSheet">
        <div v-for="(data, i) in topicDataList" >
          <h5 style="display:flex">
            <a href="#"><div @click="cancel(data.topicData.topicNum)" class="collenctionBtn"><i class="el-icon-star-off"></i></div></a>
            <span style="margin-left:5px;max-width:800px;line-height:28px">题目：{{data.topicData.stem}}</span>
          </h5>
          <el-radio-group v-if="data.topicData.topicType == '单选题'" v-model="data.userAns" size="mini" >
            <el-radio disabled label="A" style="margin-bottom:5px;">A、{{data.topicData.A}}</el-radio>
            <el-radio disabled label="B" style="margin-bottom:5px">B、{{data.topicData.B}}</el-radio>
            <el-radio disabled label="C" style="margin-bottom:5px">C、{{data.topicData.C}}</el-radio>
            <el-radio disabled label="D" style="margin-bottom:5px">D、{{data.topicData.D}}</el-radio>
          </el-radio-group>
          <el-radio-group v-if="data.topicData.topicType == '判断题'" v-model="data.userAns" size="mini" >
            <el-radio disabled label="true" style="margin-bottom:5px;"><i class="el-icon-check"></i></el-radio>
            <el-radio disabled label="false" style="margin-bottom:5px"><i class="el-icon-close"></i></el-radio>
          </el-radio-group>
          <el-input v-if="data.topicData.topicType == '填空题'" style="width:300px" v-model="data.userAns" placeholder="请输入内容"></el-input>
          <el-input v-if="data.topicData.topicType == '综合题'" style="width:600px" type="textarea" :autosize="{ minRows: 4, maxRows: 30}" :disabled="true" v-model="data.userAns"></el-input>

          <el-collapse accordion>
            <el-collapse-item>
              <template slot="title">
                <span style="margin-right:20px;width:600px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" >点击查看解析</span> 
              </template>
              <div>你的答案：</div>
              <div style="max-width:800px;word-break: break-all;text-indent: 2em;">{{data.userAns}}</div>
              <el-divider></el-divider>
              <div>正确答案：</div>
              <div style="max-width:800px;word-break: break-all;text-indent: 2em;">{{data.topicData.answer}}</div>
              <el-divider></el-divider>
              <div>解析:</div>
              <div style="text-indent: 2em;" v-if="data.analysis == '' || data.analysis == undefined">略</div>
              <div style="max-width:800px;word-break: break-all;text-indent: 2em;" v-else>{{data.analysis}}</div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
      
    </div>
  </div>
</template>

<script>
import headMenu from '../../components/headMenu.vue'
import { getCollectTopic, cancelCollection } from "../../api/user";
import { Toast } from "vant";
export default {
  data() {
    return {
      topicDataList: [],
      viewCollectFileInf: {},
    }
  },
  components: {
    headMenu
  },
  props: {
    params: {
        type: Object,
        default:{}
    }
  },
  created() {
    this.viewCollectFileInf = JSON.parse(sessionStorage.getItem('viewCollectFileInf'))
    this.getCollectTopic(this.viewCollectFileInf)
  },
  deactivated () {
    sessionStorage.removeItem('viewCollectFileInf')
    Object.assign(this.$data, this.$options.data.call(this));
  },
  methods: {
    async getCollectTopic(data) {
      await getCollectTopic(data)
        .then((res) => {
          this.topicDataList = res.topicDataList
        })
    },
    async cancelCollection(data) {
      await cancelCollection({
        viewCollectFileInf: this.viewCollectFileInf,
        topicNum: data
      })
        .then((res) => {
          this.getCollectTopic(this.viewCollectFileInf)
          Toast(res.msg)
        })
    },
    cancel(topicNum){
       this.$confirm('是否取消收藏', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.cancelCollection(topicNum)
      })
    },

  },
}
</script>

<style lang='stylus'>
.viewCollectionTopic
  flex 1 1 100%
  display block
  .VCTContainer
    margin 0 10px
    border 1px solid #CCCCCC  
    text-align center
    .answerSheet
      text-align left
      margin 20px 0 0 30px
      overflow-y auto
      max-height 550px
      .collenctionBtn
        width 28px
        height 28px
        border-radius 100%
        display flex
        align-items center
        justify-content center
        color #E6A23C
        border 1px solid #f5dab1
        background-color #fdf6ec
</style>